import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Button, Popconfirm, Row, Col } from 'antd'
import { List, Page } from 'components'
import queryString from 'query-string'
import Modal from './Modal'
import { ListMenuType } from 'utils/enums'
import { adminCompanyAccoutType, CompanyAccountInOut } from 'utils/seletLocalData'
import { routerRedux } from 'dva/router'
import Filter from './Filter'
import TableCard from '../../../components/TableCard'

const AdminCompanyAccountDetail = ({ location, dispatch, adminCompanyAccountDetail, loading }) => {
  location.query = queryString.parse(location.search)
  const { list, currentItem, modalVisible, createModalVisible, pagination, accountInfo, modalType, accountId, addressType, companyChargeTypeData, currenciesTypeData, name } = adminCompanyAccountDetail
  const { pageSize } = pagination

  const tableProps = {
    dataSource: {
      ...accountInfo,
    },
    blocks: [
      {
        title: 'AccountName',
        key: 'name',
      },
      {
        title: 'AccountNumber',
        key: 'accountNumber',
      },
      {
        title: 'CurrencyCode',
        key: 'currencyCode',
      },
      {
        title: 'Type',
        key: 'type',
        dictList: adminCompanyAccoutType,
      },
      {
        title: 'Bank',
        key: 'bankName',
      },
      {
        title: 'SwiftCode',
        key: 'swiftCode',
      },
      {
        title: 'StartBalance',
        key: 'startBalance',
      },
      {
        title: ' AccountInformation',
        key: ' accountInformation',
      },
      {
        title: 'Amount',
        key: 'amount',
      },
      {
        title: 'CustomerAmount',
        key: 'customerAmount',
      },
    ],
    cols: 2,
    rows: 5,
  }

  const createModalProps = {
    item: currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: 800,
    companyChargeTypeData,
    currenciesTypeData,
    name,
    confirmLoading: loading.effects['adminCompanyAccountDetail/update'],
    title: `${modalType}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      console.log(data)
      dispatch({
        type: `adminCompanyAccountDetail/${modalType}`,
        payload: {
          ...data,
          accountId,
        },
      })
      dispatch({
        type: 'adminCompanyAccountDetail/hideModal',
      })
    },
    onCancel () {
      dispatch({
        type: 'adminCompanyAccountDetail/hideModal',
      })
    },
  }
  const listProps = {
    dataSource: list,
    menuType: ListMenuType.MENU_UPDATE + ListMenuType.MENU_DELETE,
    loading: loading.effects['adminCompanyAccountDetail/list'],
    location,
    pagination,
    columnsData: [
      {
        title: 'Index',
        key: 'index',
        render: (text, record, index) => {
          return <span>{index + 1}</span>
        },
      },
      {
        title: 'CreateTime',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: 'CommanyChargeType',
        dataIndex: 'chargeTypeName',
        key: 'chargeTypeName',
      },
      {
        title: 'Type',
        dataIndex: 'type',
        key: 'type',
        render: (text, record) => {
          let res = ''
          CompanyAccountInOut.forEach((e) => {
            if (record.type == e.key) {
              res = e.value
            }
          })
          return res
        },
      },
      {
        title: 'Amount',
        dataIndex: 'amount',
        key: 'amount',
      },
    ],
    onChange (page) {
      const { query, pathname } = location
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          page: page.current,
          pageSize: page.pageSize,
        }),
      }))
    },
    onDeleteItem (id) {
      dispatch({
        type: 'adminCompanyAccountDetail/delete',
        payload: { id },
      })
    },
    onEditItem (item) {
      console.log(item)
      dispatch({
        type: 'adminCompanyAccountDetail/showModal',
        payload: {
          modalType: 'update',
          currentItem: item,
          type: addressType,
        },
      })
    },
  }
  const filterProps = {
    filter: {
      ...location.query,
    },
    CompanyAccountInOut,
    companyChargeTypeData,
    onFilterChange (value) {
      dispatch(routerRedux.push({
        pathname: location.pathname,
        search: queryString.stringify({
          ...value,
          page: 1,
          accountId,
          pageSize,
        }),
        // query: {
        //   ...value,
        //   page: 1,
        //   pageSize,
        // },

      }))
    },
    onCreateAdd () {
      dispatch({
        type: 'adminCompanyAccountDetail/showModal',
        payload: {
          modalType: 'create',
          currentItem: {},
        },
      })
    },
  }
  const handleDeleteItems = () => {
    dispatch({

    })
  }
  return (
    <Page inner>
      <Filter {...filterProps} />
      <TableCard {...tableProps} />
      <List {...listProps} />
      {modalVisible && <Modal {...createModalProps} />}
    </Page>
  )
}

AdminCompanyAccountDetail.propTypes = {
  adminCompanyAccountData: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
  adminCompanyAccountDetail: PropTypes.object,
}


export default connect(({ adminCompanyAccountDetail, loading }) => ({ adminCompanyAccountDetail, loading }))(AdminCompanyAccountDetail)

